<template>
  <v-layout row wrap>

    <v-flex xs12 sm12 md10 offset-md1>
      <router-link :to="{name: 'polls.create'}"><v-btn large class="mb-2" color="primary" dark>添加</v-btn></router-link>
      <v-data-table
        :headers="headers"
        :items="items"
        hide-actions
        class="elevation-1"
      >
      <template slot="items" slot-scope="props">
        <td class="text-md-center">{{ props.item.id }}</td>
        <td class="text-md-left">{{ props.item.title }}</td>
        <td class="text-md-left">{{ props.item.createuser }}</td>
        <td class="text-md-left">{{ props.item.verifyuser }}</td>
        <td class="text-md-center">{{ props.item.vote_count }}</td>
        <td class="text-md-center">{{ props.item.show_votecount }}</td>
        <td class="text-md-center">{{ props.item.verifyflag }}</td>
        <td class="text-md-center">{{ props.item.endflag }}</td>
        <td class="justify-right layout px-0">
          <v-btn icon class="mx-0" @click="votes(props.item)">
            <v-icon color="teal">add</v-icon>
          </v-btn>
          <v-btn icon class="mx-0" @click="editItem(props.item)">
            <v-icon color="teal">edit</v-icon>
          </v-btn>
          <v-btn icon class="mx-0" @click="deleteItem(props.item)">
            <v-icon color="pink">delete</v-icon>
          </v-btn>
        </td>
      </template>
      </v-data-table>
      <div class="text-xs-center pt-2">
        <v-pagination :length="2" v-model="page" :total-visible="7"></v-pagination>
      </div>
    </v-flex>
  </v-layout>
</template>

<script>
import axios from '@/helpers/http'
export default {
  data: () => ({
    search: '',
    page: 1,
    perPage: 5,
    totalpage: 0,
    headers: [
      {
        text: 'ID',
        sortable: true,
        value: 'id'
      },
      { text: '标题', value: 'title' },
      { text: '创建人', value: 'createuser', sortable: false },
      { text: '审核人', value: 'verifyuser', sortable: false },
      { text: '人数', value: 'vote_count', sortable: false },
      { text: '显示', value: 'show_votecount', sortable: false },
      { text: '审核', value: 'verifyflag', sortable: false },
      { text: '结束', value: 'endflag', sortable: false },
      { text: '操作', value: 'id', sortable: false }
    ],
    items: []
  }),

  computed: {
    length () {
      return this.totalpage
    }
  },

  mounted () {
    return axios.get('/api/v2/admin/polls?per_page=' + this.perPage).then(response => {
      this.items = response.data.data
      this.totalpage = response.data.totalpage
    })
  },

  methods: {
    deleteItem (item) {
      const index = this.items.indexOf(item)
      if (confirm('请确认删除此分类?')) {
        return axios.post('/api/v2/polls/' + item.id + '/destroy').then(response => {
          this.items.splice(index, 1)
        })
      }
    },
    editItem (item) {
      this.$router.push({name: 'polls.edit', params: { poll: item.id }})
    },
    votes (item) {
      this.$router.push({name: 'votes.index', params: { poll: item.id }})
    }
  }
}
</script>

<style>
  table.table thead tr th {
    font-size: 1.5rem;
  }
  table.table tbody tr td {
    font-size: 1.2rem;
  }
</style>
